import React, { Component} from 'react';

import { SearchBar, Space, Toast, Modal, NavBar } from 'antd-mobile'
import { keyall_search,search_hotsearch } from "../api/index"

import "../styles/MySearch.scss"
class MySearch extends Component {
    constructor(props) {
        super(props)
        this.state = {
            searchlist: [],
            hotlist: [],
            text:''
        }
    }
    goback() {
        this.props.history.go(-1);
    }
    goSearch(val) {
        // 搜索框有值
        if (val) {
            console.log(val);
            keyall_search({ searchkey: val }).then((res) => {
                console.log(res);
                if (res.data.list.length != 0) {// eslint-disable-line
                    this.setState({
                        searchlist: res.data.list
                    })
                } else {
                    Modal.alert({
                        content: "暂无数据",
                        closeOnMaskClick: true,
                    });
                }
            })
        }else{
            this.clear();
        }

    }
    clear() {
        this.setState({
            searchlist: []
        })
    }
    goDetail(goodid) {
        this.props.history.push("/goodsdetail/" + goodid)
    }
    async componentDidMount() {
        var res = await search_hotsearch()
        console.log("热门搜索", res);
        this.setState({
            hotlist: res.data.list
        })
    }
    async goHot(v){
        var res=await keyall_search({searchkey:v})
        this.setState({
            searchlist:res.data.list,
            text:v
        })

    }
    valueChange(e){
        console.log(e);
        this.setState({
            text:e
        })
    }
    render() {
        return (
            <div className='search-box'>
                <NavBar
                    onBack={() => {
                        this.goback();
                    }}
                >
                    搜索
                </NavBar>
                <Space block direction='vertical' />
                <SearchBar
                    ref={this.state.searchRef}
                    placeholder='请输入内容'
                    // showCancelButton
                    onSearch={val => {
                        Toast.show(`你搜索了关于：${val}的具体物品`)
                    }}
                    onFocus={() => {
                        Toast.show('输入所搜内容')
                        // 获取到写的value
                    }}
                    onBlur={(e) => {
                        // Toast.show('失去焦点')
                        // 获取到输入的值
                        this.goSearch(e.target.value)
                    }}
                    onClear={() => {
                        // Toast.show('清空内容')
                        // 清空内容
                        this.clear();
                    }}
                    // onCancel={() => {
                    //     Toast.show('取消搜索')
                    // }}
                    value={this.state.text}
                    onChange={(e)=>{
                        this.valueChange(e)
                    }}
                />
                {/* 没有搜索时候的显示 */}
                {
                    this.state.searchlist.length != 0 ?// eslint-disable-line
                        <div className="search-main">
                            {
                                this.state.searchlist &&
                                this.state.searchlist.map((item, index) => {
                                    return (
                                        <div
                                            key={index}
                                            className="search-all"
                                            onClick={() => {
                                                this.goDetail(item.id);
                                            }}
                                        >
                                            <img src={item.pic} alt="" />
                                            <div className='search-reduce'>
                                                <p>{item.name}</p>
                                                <h4>
                                                    活动价￥<span>{item.salesPrice.value}</span>
                                                </h4>
                                            </div>
                                        </div>
                                    );
                                })}

                        </div> : <div className='hotsearch-box'>
                            <div className='hotsearch-name'>
                                最近搜索
                            </div>
                            < ul >
                                {
                                    this.state.hotlist &&
                                    this.state.hotlist.map((v, i) => {
                                        return (
                                                <li key={i + "a"} onClick={()=>{this.goHot(v)}}>{v}</li>
                                        );
                                    })
                                }
                            </ul>
                            <div className='hotsearch-name'>
                                热门搜索
                            </div>
                            < ul >
                                {
                                    this.state.hotlist &&
                                    this.state.hotlist.map((v, i) => {
                                        return (
                                                <li key={i + "a"} onClick={()=>{this.goHot(v)}}>{v}</li>
                                        );
                                    })
                                }
                            </ul>
                        </div>
                }
            </div>
        );
    }
}

export default MySearch;
